<template>
  <view
    :style="{ paddingTop: `${paddingTop}px` }"
    class="relative flex h-full w-72 flex-col bg-white shadow"
  >
    <navigator url="/pages/room/search">
      <view
        class="mx-2 my-2 flex h-14 items-center rounded-full bg-zinc-100 px-4"
      >
        <uni-icons
          font-family="heroicons-outline"
          :size="22"
          class="mr-2"
          color="#4b5563"
        >
          {{ '\ue9cb' }}
        </uni-icons>
        <input class="h-14 w-full" :placeholder="t('search')" />
      </view>
    </navigator>
    <view class="mt-2">
      <view
        v-for="(item, idx) in AIModels"
        :key="idx"
        class="flex items-center p-3"
        :class="{
          'bg-violet-100':
            AIModel?.name === item.name && !store.state.chat.currentRoomId,
        }"
        @click="toggleModelAction(item.name)"
      >
        <view class="size-6 rounded-full" :class="item.background"></view>
        <view class="ml-3">{{ item.label }}</view>
      </view>
    </view>

    <view class="mx-2 h-[1px] border-b border-gray-200"></view>
    <scroll-view
      :scroll-y="true"
      class="h-full overflow-hidden"
      @scrolltolower="fetchNextPage"
    >
      <view
        v-for="(item, idx) in randomList"
        :key="idx"
        class="truncate p-3"
        @click="handleSendMessage(item)"
      >
        {{ item.question }}
      </view>

      <view
        v-for="room in conversations"
        :key="room.id"
        class="truncate p-3"
        :class="{
          'bg-violet-100': room.id === Number(store.state.chat.currentRoomId),
        }"
        @click="toggleConversationAction(room)"
      >
        {{ room.roomName ?? t('newConversation') }}
      </view>
      <uni-load-more
        v-if="isFetchingNextPage || isLoading"
        status="loading"
        icon-type="circle"
        :show-text="false"
      />
      <uni-load-more
        v-if="!isFetchingNextPage && !hasNextPage && !isLoading"
        status="noMore"
        :show-text="false"
      />
    </scroll-view>
    <view class="mx-2 h-[1px] border-b border-gray-200"></view>
    <view class="mt-2">
      <view
        class="flex items-center p-3"
        @click="goToPage('/pages/settings/custom-instruction')"
      >
        <uni-icons font-family="heroicons-outline" :size="24" color="#3f3f46">
          {{ '\ue95b' }}
        </uni-icons>
        <view class="ml-3">{{ t('customInstructions') }}</view>
      </view>
    </view>
    
    <navigator url="/pages/settings/index" hover-class="none">
      <view
        class="z-10 flex w-full items-center justify-between border-t border-gray-200 bg-white p-3"
      
        >
        <view class="flex items-center">
          <image
            v-if="user.avatar"
            :src="user.avatar"
            class="size-10 rounded-full"
            mode="aspectFill"
          />
          <view v-else class="size-10 rounded-full bg-amber-700"></view>
          <view class="ml-3">{{ user.nickname }}</view>
        </view>
        <uni-icons type="more-filled" size="20" />
      </view>
    </navigator>
  </view>
</template>
<script setup>
import { useUser } from '@/composables/useUser'
import { onLoad } from '@dcloudio/uni-app'
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'
import { ref } from 'vue'
import { useStore } from 'vuex'
import useQuery from '@/composables/useQuery'
import { watchEffect } from 'vue'
import useLocale from '@/composables/useLocale'
import { useAIModel, useConversations } from './hooks'
import { getList } from '@/api/chat'
const { VITE_CONVERSATION_LIMIT } = import.meta.env

const emit = defineEmits(['close', 'sendMessage'])
const store = useStore()
const user = useUser()
const { t } = useLocale()

const { conversations, toggleConversationAction, getConversations } =
  useConversations(emit)
const { AIModel, AIModels, toggleModelAction } = useAIModel(emit)
const { data, isFetchingNextPage, hasNextPage, isLoading, fetchNextPage } =
  useQuery({
    fetcher: getConversations,
    pageSize: VITE_CONVERSATION_LIMIT,
  })
watchEffect(() => {
  if (data.value.length > 0) {
    store.commit('chat/setRoomList', data.value)
  }
})

const paddingTop = ref(0)

function handleSendMessage(item) {
  emit('sendMessage', {
    msg: item.question,
    files: [],
  })
}

const randomList = ref([])

onLoad(async () => {
  getList().then((result) => {
    randomList.value = result || []
    console.log('randomList', randomList)
  })

  uni.getSystemInfo({
    success: (res) => {
      paddingTop.value = res.safeAreaInsets.top
    },
  })
})

function goToPage(url) {
    uni.navigateTo({ url })
}
</script>
